<template>
    <div class="login-container">
        <div class="login-form">
            <h2 class="title">欢迎登录</h2>

            <!-- 登录表单 -->
            <el-form :model="form" :rules="rules" ref="loginForm" @submit.native.prevent="handleLogin">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user" size="large" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="form.password" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                        size="large" @keyup.enter.native="handleLogin" />
                </el-form-item>

                <el-form-item>
                    <el-button :loading="loading" type="primary" size="large" native-type="submit" style="width: 100%">
                        登 录
                    </el-button>
                </el-form-item>
            </el-form>

            <!-- 错误提示 -->
            <div v-if="error" class="error-message">
                {{ error }}
            </div>
        </div>
    </div>
</template>

<script>
import useUserStore from '@/store/modules/user'

// const userStore = useUserStore()
export default {
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            loading: false,
            error: ''
        };
    },
    methods: {
        async handleLogin() {
            this.$refs.loginForm.validate(async (valid) => {
                if (!valid) return;

                this.loading = true;
                this.error = '';

                try {
                    const userStore = useUserStore();

                    // ✅ 1. 调用 store 的 login 方法（存 token）
                    await userStore.login(this.form);

                    // ✅ 2. 获取用户详细信息（存 userId, userName 等）
                    await userStore.getInfo();

                    this.$message.success('登录成功！');
                    this.$router.push('/chatlayout');

                } catch (err) {
                    this.error = err.message || '登录失败';
                    this.$message.error(this.error);
                } finally {
                    this.loading = false;
                }
            });
        }
    }
};
</script>
<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Segoe UI', Arial, sans-serif;
}

.login-form {
    width: 400px;
    padding: 40px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.login-form:hover {
    transform: translateY(-5px);
}

.title {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 24px;
}

.error-message {
    color: #f56c6c;
    font-size: 14px;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 15px;
}
</style>